<template>
  <div class="schoollist">
    <h2>学校查询</h2>
    <form >
    <p>请输入学校名称:<input type="search" v-model="sc"></p>
     
     
    </form>
      <button  class="b1" @click="b1()">硕博人数查询</button>
     <button class="b2" @click="b2()">排序</button>
     <button class="b3" @click="b3()">还原</button>
<table class="tt"  border="1" cellpadding="0" cellspacing="0" >
        <thead>
        <tr>
            
            <th class="tt1">学校名称</th>
            <th class="tt2">本科</th>
            <th class="tt3">硕士</th>
            <th class="tt4">博士</th>
            <th class="tt5">专任教师</th>
            <th class="tt6">备注</th>
            <th class="tt6"  v-show="x==1">本硕博人数</th>

           
            


        </tr>
        </thead>
        <tbody v-for="(item,index) in data2" :key="index">
        <tr>         
            <td align="center">{{item.school}}</td>
            <td align="center">{{item.UnderGraduate}}</td>
            <td align="center">{{item.Master}}</td>
            <td align="center">{{item.Dr}}</td>
            <td align="center">{{item.Teach}}</td>
            <td align="center">{{item.notes}}</td> 
            <td align="center" v-if="x==1">{{item.UnderGraduate+item.Master +item.Dr  }}</td>              

             
        </tr>
       
              
  </tbody>
  <tfoot>
  </tfoot>
      </table>
  </div>
</template>

<script>
import data2 from "../assets/JS/data2.js";

export default {
 name:'SchoolList',
 data(){
    return{
        data2,
        sc:'',
        x:0,
        y:0,
        filist:data2,
        
    }
 },
   watch:{
    sc(x){
        let arr=[];
        this.data2.forEach(item=>{
            if(this.sc!=''&&item.school.indexOf(x)!=-1){
                arr.push(item)
            }
        })
        this.data2=arr
    }
 },
  mounted(){

        this.data1 ==data2
        },
    
 methods:{
    b1(){
        this.x=1
    },
    b2(){
       if(this.x==0){
         data2.sort((a,b)=>{
            return(b.UnderGraduate+b.Master+b.Dr)-(a.UnderGraduate+a.Master+a.Dr)
        });
        data2.forEach(item=>{
            console.log(item);
            
        })
       }
       this.x=1;
       
        
    },
    b3(){
        this.x=0;
        
    },
    b4(){

    },
    querySchool(){
        
    }
     
     }
   }
 
 

</script>

<style scoped>

form{
    display: flex;
    
}
table tfoot{
    display: flex;
}
.schoollist{
    text-align: center;
    margin: auto;
}
.schoollist p{
    text-align: center;
    margin: auto;
}
.tt{
    margin-top: 20px;
      
      
  
}
.tt tr{
    height: 30px;
}
.tt .tt1{
    width: 150px;
  
}
.tt .tt2{
    width: 100px;
}
.tt .tt3{
    width: 100px;
}
.tt .tt4{
    width: 100px;
  
}
.tt .tt5{
    width: 100px;
}
.tt .tt6{
    width: 180px;
}
.tt p{
  height: 100px;
  width: 200px;
}
.b1{
  height: 30px;
  width: 100px;
  color: white;
  background-color: rgb(80, 40, 190);
  border: none;
  border-radius: 5px;
}
.b2{
  height: 30px;
  width: 100px;
  color: white;
  background-color: rgb(12, 128, 182);
  border: none;
  border-radius: 5px;
}
.b3{
  height: 30px;
  width: 100px;
  color: white;
  background-color: rgb(37, 199, 15);
  border: none;
  border-radius: 5px;
}

.b4{
  height: 30px;
  width: 60px;
  color: white;
  background-color: rgb(206, 11, 60);
  border: none;
  margin-left: 10px;
  border-radius: 5px;
}
</style>